<template>
	<view class="uni-list list-pd">
		<view class="uni-list-cell cell-pd">
			<view class="uni-uploader">
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-if="image">
							<view class="uni-uploader__file">
								<image src="https://assets-cdn.lanqb.com/hyxq/xcxu/del.png"  class="del" @tap="delect(index)"></image>
								<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
							</view>
						</block>
						<block v-else>
							<view class="uni-uploader__input-box">
								<view class="uni-uploader__input" @tap="chooseImage"></view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	export default {
		props: {
			image: '',
		},
		data() {
			return {
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 0,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
			}
		},
		methods: {
			chooseImage: async function() {
				if (this.image) {
					return;
				}
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: 1,
					success: (res) => {
						this.Upload(res.tempFilePaths[0]);
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 上传图片  api ==  上传作品接口
			async Upload(filePath) {
				this.$emit('upload', {
					url: filePath
				})
				// try{
				// 	let [err2,res2] = await this.$http.upload('/image/uploadmore',{
				// 		name: 'imglist[]',
				// 		filePath:filePath,
				// 		token:true,
				// 		checkToken:true
				// 	});
				// 	let data = JSON.parse(res2.data);
				// 	// 上传失败
				// 	if (err2 || data.errorCode) {
				// 		uni.showToast({ title: data.msg ? data.msg : '上传失败', icon:"none" });
				// 		return false;
				// 	}
				// 	// 上传成功
				// 	let list = data.data.list;
				// 	// 通知父组件
				// 	this.$emit('upload',list[0])
				// }catch(e){
				// 	return;
				// }
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					urls: [this.image]
				})
			},
			delect(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: (res) => {
						if (res.confirm) {
							this.$emit('del', index)
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.cell-pd {
		padding: 60upx 0upx;
	}

	.uni-uploader__file {
		position: relative;
		text-align: center;
	}

	.uni-uploader__input-box,
	.uni-uploader__file {
		margin: 0 auto;
	}

	.uni-uploader-body {
		margin-top: 0;
	}

	.uni-list::before {
		box-shadow: 0 2px 15px rgba(0,0,0,.5);
		background-color: #fff;
	}

	.uni-list::after {
		left: 32upx;
		width: 686upx;
	}
	.del {
		position: absolute;
		right: 0;
		top: 0;
		background: #333333;
		color: #FFFFFF;
		padding: 2upx 10upx;
		border-radius: 10upx;
		z-index: 100;
		width: 40upx;
		height: 40upx;
	}
</style>
